<template>
  <Modal :mask-closable="false" v-model="visible" :title="title">
    <Form
      ref="form"
      v-if="visible"
      class="form-container formList"
      :model="form"
      label-position="top"
      :rules="rules"
    >
      <Row :gutter="16">
        <Col span="12">
          <FormItem
            label="设备编号"
            required
            prop="equipmentCode"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentCode"
              placeholder="请输入设备编号"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            label="设备名称"
            required
            prop="equipmentName"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentName"
              placeholder="请输入物料名称"
              class="inputBorder"
            ></Input> </FormItem
        ></Col>

        <Col span="12">
          <FormItem
            label="设备品牌"
            required
            prop="equipmentBrand"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentBrand"
              placeholder="请输入设备品牌"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
            label="设备类别"
            required
            prop="equipmentType"
            class="custom-form-item"
          >
            <Select v-model="form.equipmentType" clearable>
              <Option
                v-for="item of typeList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
            label="设备来源"
            required
            prop="equipmentSource"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentSource"
              placeholder="请输入设备来源"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
            label="设备功率(kW)"
            required
            prop="equipmentPower"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentPower"
              placeholder="请输入设备功率(kW)"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
            label="设备重量(kg)"
            required
            prop="equipmentWeight"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.equipmentWeight"
              placeholder="请输入设备重量(kg)"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>
        
        <Col span="12">
          <FormItem
            label="出厂编号"
            required
            prop="equipmentWeight"
            class="custom-form-item"
          >
            <Input
              type="text"
              v-model="form.leaveCode"
              placeholder="请输入出厂编号"
              class="inputBorder"
            ></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer" v-if="visible">
      <Button type="default" @click="closeModal">取消</Button>
      <Button type="primary" @click="handleSubmit('form')">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "CreateOrUpdateModal",
  props: {
    visible: Boolean,
    form: Object,
    title: String,
    handleAddSubmit: Function,
    typeList: Array,
    closeSubmit: Function,
  },
  data() {
    return {
      rules: {
        materialType: [
          { required: true, message: "请输入物料类型", trigger: "blur" },
        ],
        materialName: [
          { required: true, message: "请输入物料名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    closeModal() {
      this.closeSubmit();
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(formName);
        }
      });
    },
  },
};
</script>

<style scoped>
.form-container {
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: space-between; /* 子项之间的间隔 */
}

.form-container .form-item {
  flex: 1 0 48%; /* 每个表单项占据48%的宽度，剩余空间由space-between处理 */
  margin-bottom: 20px; /* 根据需要调整 */
}

/* 如果需要处理响应式布局，可以添加媒体查询 */
@media (max-width: 768px) {
  .form-container .form-item {
    flex: 1 0 100%; /* 在小屏幕上，每个表单项占据整行 */
  }
  .custom-form-item {
    width: 200px;
  }
}

/* 注意：由于Element UI的FormItem没有直接的.form-item类，你可能需要自定义或检查实际应用的类名 */
</style>
